<template>
  <div class="common-wrap">
    <QueryForm
      ref="conditionForm"
      module="cabinetArrangement"
      :searchBtnLoading="loading"
      v-model:searchForm="searchForm"
      v-model:search-column="searchColumn"
      @handle-search="onSearch"
    />
    <div class="common-box">
      <el-row style="height: 40px" class="con-button-rows">
        <ButtonGroup
          :disabledDelete="multipleSelection.length === 0"
          :disabledEdit="multipleSelection.length != 1"
          :hasPermiAdd="['common:cabinetArrangement:add']"
          :hasPermiEdit="['common:cabinetArrangement:edit']"
          :buttonType="['add', 'edit']"
          @add="onAdd"
          @edit="onEdit"
        >
          <el-button
            :disabled="multipleSelection.length != 1"
            v-hasPermi="['common:cabinetArrangement:refresh']"
            icon="Refresh"
            :title="$t('重置')"
            @click="onRefresh"
          ></el-button>
          <el-button
            :disabled="multipleSelection.length === 0"
            v-hasPermi="['common:cabinetArrangement:cabinet']"
            :title="$t('排柜')"
            icon="MessageBox"
            @click="onCabinetArrangement"
          ></el-button>
        </ButtonGroup>
      </el-row>
      <MyTable
        tableId="cabinetArrangement"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pageVo="pageVo"
        ref="commonTable"
        moduleName="cabinetArrangement"
        @handleSelectionChange="handleSelectionChange"
        @handle-page-change="handlePageChange"
      ></MyTable>
    </div>
    <Add
      v-if="addVisible"
      v-model:visible="addVisible"
      :isTypeRadio="isTypeRadio"
      @onSubmit="onCabinet"
    ></Add>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    </el-drawer>
  </div>
</template>

<script setup lang='tsx'>
import { ref, reactive, onMounted, onUnmounted, h } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import * as api from "@/api/index.js";
import Add from "./components/add.vue";
import { ElMessage, ElMessageBox, ElRadioGroup, ElRadio } from "element-plus";
import { hasPermi } from "@/utils/mUtils.js";
let { t } = useI18n();
const router = useRouter();
defineOptions({
  name: "CabinetArrangement",
});
const pageVo = reactive({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const loading = ref(true);
const dataSource = ref([]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "containerSortNo",
    title: "柜序",
    slots: {
      default: ({ row }) => {
        return [
          <el-button
            type="primary"
            disabled={!hasPermi(["common:cabinetArrangement:view"])}
            link
            onClick={() => {
              onView(row);
            }}
          >
            {row.containerSortNo || ""}
          </el-button>,
        ];
      },
    },
  },
  {
    field: "bookingNo",
    title: "舱位编号",
  },
  {
    field: "lineDetailCode",
    title: "航线",
  },
  {
    field: "lineName",
    title: "干线名称",
  },
  {
    field: "loadingPortName",
    title: "起运港",
  },
  {
    field: "dischargePortName",
    title: "卸货港",
  },
  {
    field: "deliveryPortName",
    title: "目的港",
  },
  {
    field: "containerCode",
    title: "柜型",
  },
  {
    field: "goodsTypeName",
    title: "货物类型",
  },
  {
    field: "typeName",
    title: "L/F",
  },
  {
    field: "soNo",
    title: "SO号",
  },
  {
    field: "bookingProviderName",
    title: "订舱代理",
  },
  {
    field: "providerName",
    title: "船公司",
  },
  {
    field: "shippingInstructionCutoffTime",
    title: "截单时间",
  },
  {
    field: "cargoReceivingCutoffTime",
    title: "截货时间",
  },
  {
    field: "totalPcs",
    title: "总件数",
  },
  {
    field: "totalGrossWeight",
    title: "毛重",
  },
  {
    field: "totalVolume",
    title: "体积",
  },
  {
    field: "exportOrderNo",
    title: "海出单号",
  },
  {
    field: "month",
    title: "月份",
  },
  {
    field: "status",
    title: "状态",
    formatter: ({ row }) => {
      const obj = {
        1: "未排满",
        0: "空柜",
        2: "已排满",
        3: "已出发",
        4: "已完成",
      };
      return obj[row.status] || "-";
    },
  },
  {
    field: "createByName",
    title: "创建人",
  },
  {
    field: "createTime",
    title: "创建时间",
  },
]);
const searchForm = ref({});
const searchColumn = ref([
  {
    type: "label_input",
    label: "柜序",
    prop: "typeCode",
  },
  {
    type: "label_input",
    label: "舱位编号",
    prop: "cabinetArrangementCode",
  },
  {
    type: "label_input",
    label: "起运港",
    prop: "cabinetArrangementName",
  },
  {
    type: "label_input",
    label: "SO号",
    prop: "cabinetArrangementName",
  },
  {
    type: "label_input",
    label: "目的港",
    prop: "cabinetArrangementName",
  },
  {
    type: "label_input",
    label: "订舱代理",
    prop: "cabinetArrangementName",
  },
  {
    type: "label_input",
    label: "船公司  ",
    prop: "cabinetArrangementName",
  },
]);
const multipleSelection = ref([]);
const addVisible = ref(false);
const drawer = ref(false);
onMounted(() => {
  onSearch();
});
const list = () => {
  loading.value = true;
  api.default.oceanFreight.cabinetArrangement
    .list({
      ...searchForm.value,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    })
    .then((res) => {
      dataSource.value = res.rows;
      loading.value = false;
      pageVo.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
const isTypeRadio = ref();
const onAdd = () => {
  isTypeRadio.value = 0;
  addVisible.value = true;
};
const onCabinet = (val) => {
  if (!isTypeRadio.value) {
    onSearch();
    return;
  }
  api.default.oceanFreight.cabinetArrangement
    .reset({
      id: multipleSelection.value[0].id,
      bookingSpaceId: val.id,
    })
    .then(() => {
      ElMessage.success(t("修改成功"));
      onSearch();
    });
};
const onEdit = () => {
  const detailed = multipleSelection.value[0];
  router.push({
    path: "/oceanFreight/seaFreightExport/pg/edit",
    query: {
      title: "排柜修改",
      detailed: detailed.containerSortNo,
      id: detailed.id,
    },
  });
};
const onRefresh = () => {
  isTypeRadio.value = 0;
  ElMessageBox.confirm(
    () =>
      h(
        ElRadioGroup,
        {
          modelValue: isTypeRadio.value,
          "onUpdate:modelValue": (val: boolean | string | number) => {
            isTypeRadio.value = val;
          },
          style: {
            display: "flex",
            alignItems: "center",
          },
        },
        [
          h(ElRadio, { value: 0 }, { default: () => t("重置") }),
          h(ElRadio, { value: 1 }, { default: () => t("SO号") }),
        ]
      ),
    t("提示"),
    {
      confirmButtonText: t("确定"),
      cancelButtonText: t("取消"),
    }
  )
    .then(() => {
      if (!isTypeRadio.value) {
        api.default.oceanFreight.cabinetArrangement
          .reset({
            id: multipleSelection.value[0].id,
          })
          .then(() => {
            ElMessage.success(t("重置成功"));
            onSearch();
          });
      } else {
        addVisible.value = true;
      }
    })
    .catch(() => {});
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  list();
};
const onSearch = () => {
  pageVo.currentPage = 1;
  list();
};
const onCabinetArrangement = () => {
  const detailed = multipleSelection.value
    .map((item) => item.containerSortNo)
    .join(",");
  const ids = multipleSelection.value.map((item) => item.id).join(",");
  router.push({
    path: "/oceanFreight/seaFreightExport/pg/cabinet",
    query: {
      title: "排柜操作",
      detailed: detailed,
      id: ids,
    },
  });
};
const onView = (row) => {
  router.push({
    path: "/oceanFreight/seaFreightExport/pg/view",
    query: {
      title: "排柜查看",
      detailed: row.containerSortNo,
      id: row.id,
    },
  });
};
</script>

<style lang="scss" scoped>
.pcMenu {
  height: 100%;
  width: 100%;
  background: #fff;
}
</style>